﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="AutoSize.aspx.cs" Inherits="ControlExplorer.C1LightBox.AutoSize" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1LightBox" TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<wijmo:C1LightBox ID="C1LightBox1" runat="server" Player="Img" TextPosition="TitleOverlay" AutoSize="true" KeyNav="true">
	<Items>
		<wijmo:C1LightBoxItem ID="LightBoxItem1" Title="Sport1" Text="Sport1" 
			ImageUrl="http://lorempixum.com/120/90/sports/1" 
			LinkUrl="http://lorempixum.com/600/400/sports/1" />
		<wijmo:C1LightBoxItem ID="LightBoxItem2" Title="Sport2" Text="Sport2" 
			ImageUrl="http://lorempixum.com/120/90/sports/2" 
			LinkUrl="http://lorempixum.com/800/400/sports/2" />
		<wijmo:C1LightBoxItem ID="C1LightBoxItem3" Title="Sport3" Text="Sport3" 
			ImageUrl="http://lorempixum.com/120/90/sports/3" 
			LinkUrl="http://lorempixum.com/300/400/sports/3" />
		<wijmo:C1LightBoxItem ID="C1LightBoxItem4" Title="Sport4" Text="Sport4" 
			ImageUrl="http://lorempixum.com/120/90/sports/4" 
			LinkUrl="http://lorempixum.com/600/300/sports/4" />
	</Items>
</wijmo:C1LightBox>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">

<p>
C1LightBox可以根据图像的宽度和高度自动调整内容。
这使得能显示图像正确的宽度/高度比。

</p>

<p>
<b>AutoSize</b>属性设置为True启用自动调整大小功能。

</p>

<p>
 当容器改变大小时<b>ResizeAnimation</b>属性决定了动画效果。
<b>ResizeAnimation.Animated</b>属性支持以下值：

</p>
<ul>
<li><strong>None</strong> -无动画</li>
<li><strong>Wh</strong> - 调整高度之前调整宽度。</li>
<li><strong>Hw</strong> - 调整宽度之前调整高度。</li>
<li><strong>Sync</strong> - 同时调整高度和宽度</li>
</ul>
<p>
请注意，仅适用于图像内容的自动调整大小功能。

</p>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">


<script type="text/javascript">
	$(function () {
		$('.option').change(function () {
			$("#<%=C1LightBox1.ClientID%>").wijlightbox('option', {
				resizeAnimation: { animated: $('#animation').val() }
			});
		});
	});
	
</script>

<div class="demo-options">
<label>动画</label>
<select id="animation" class='option'>
	<option value="sync" selected='true'>sync</option>
	<option value="wh">wh</option>
	<option value="hw">hw</option>
	<option value="none">none</option>
</select>
</div>

</asp:Content>
